
<template>
  <div id="NavBar">
    <!-- 头部标题 -->
    <van-nav-bar
      title="前端最牛逼"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 下拉刷新 star -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <!-- 新闻列表 star -->
      <van-card
        v-for="item in list"
        :key="item.id"
        :title="item.title"
        @click="toDetail(item.id)"
        currency=""
      >
        <!-- 左侧图片 -->
        <div slot="thumb">
          <van-image
            :src="item.img_url"
            fit="cover"
          ></van-image>
        </div>
        <!-- 发布时间 -->
        <div slot="price">
          <div>发表时间：{{item.add_time.substr(0,10)}}</div>
        </div>
        <!-- 点击数量 -->
        <div slot="num">
          <div>点击: {{item.click}}</div>
        </div>
      </van-card>
      <!-- 新闻列表 end -->
    </van-pull-refresh>
    <!-- 底部菜单 -->
    <van-tabbar v-model="active">
      <van-tabbar-item
        icon="home-o"
        to="/home"
      >
        首页
      </van-tabbar-item>
      <van-tabbar-item
        icon="search"
        dot
        to="/member"
      >
        会员
      </van-tabbar-item>
      <van-tabbar-item
        icon="friends-o"
        info="5"
        to="/shopcar"
      >
        购物车
      </van-tabbar-item>
      <van-tabbar-item
        icon="setting-o"
        info="20"
        to="/search"
      >
        设置
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: '',
      count: 0,
      isLoading: false,
      list: []
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    //跳转上一级
    onClickLeft() {
      this.$router.go(-1)
    },
    //跳转详情
    toDetail(id) {
      this.$router.push(`/newslist/detail/${id}`)
    },
    // 获取新闻资讯列表
    async getlist() {
      const { data: res } = await this.$http.get('/api/getnewslist')
      this.list = res.message
    },
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 500)
    }
  } //end methods
} //end export default
</script>
<style lang="less" scoped>
.van-pull-refresh {
  // overflow-x: hidden;
  margin: 46px 0 50px 0;
}
.van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
}
//头部导航栏背景
.van-nav-bar,
.van-nav-bar__text:active {
  background-color: #1989fa;
}
//更改导航栏字体颜色
.van-nav-bar__title,
.van-nav-bar__text,
.van-nav-bar .van-icon {
  color: #fff;
}
//新闻列表边框
.van-card {
  background: #fff;
  border-bottom: 1px solid #eee;
  margin: 0 10px;
  padding: 10px;
}
//清除默认margin-top
.van-card:not(:first-child) {
  margin-top: 0px;
}
.van-card__header {
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 50px;
}
.van-card__content,
.van-image {
  min-height: 42px;
}
.van-image {
  padding: 0;
  height: 42px;
}

//图片盒子大小
.van-card__thumb {
  width: 42px;
  height: 42px;
}
//标题样式
.van-card__title {
  height: 17px;
  font-weight: 700;
  color: #000;
}
//发表时间样式
.van-card__price,
.van-card__num {
  font-size: 12px;
  color: #226aff;
  line-height: 30px;
}
</style>
